/*****流量下发 -- 对抗演练*****/
<template><!---->
	<div id="flow">
    <div class="borders">
    <Row class="targetHeader">
    	<!--<Button type="primary" @click="openModal">流量过滤</Button>
        <Page :total= flowList.length
            show-total show-elevator  show-sizer  @on-page-size-change="getFlowSize"
            @on-change="getFlowPage" style="float: right">
        </Page>-->
        <Alert type="warning" show-icon>
        	<p style="color:#f90">配置流量过滤:</p>
        	<p>	1.流量过滤主要用于筛选出大屏展示的攻击流量数据</p>
        	<p>	2.“源”原则上要选择红方的接入机器，不要选蓝方的接入机器或者题目机器</p>
        	<p>	3.“目标”原则上选蓝方的接入机器或者题目机器，不要选择红方的接入机器</p>
        </Alert>
    </Row>
    <!--<Table border :columns="flowCol" :data="flowListPage"></Table>-->
    <Row>
    	<Col span="18" offset="3">
    		<p>源</p>
    		<Transfer
		        :data="flowPortSrcListTransfer"
		        :target-keys="srcDevices"
		        :titles="['可选机器','已选机器']"
		        filterable
		        :filter-method="srcFilterMethod"
		        :list-style="listStyle"
		        @on-change="srcHandleChange" style="margin-bottom:10px;width:100%;">
		    </Transfer>
		    <p>目标</p>
	        <Transfer
		        :data="flowPortSrcListTransfer"
		        :target-keys="dstDevices"
		        :titles="['可选机器','已选机器']"
		        filterable
		        :filter-method="dstFilterMethod"
		        :list-style="listStyle"
		        @on-change="dstHandleChange"  style="margin-bottom:10px;width:100%;">
		    </Transfer>
		    <!--<Button type="primary" long @click="getSelDstFlowPorts" style="width:86%;">下发</Button>-->
    	</Col>
    </Row>
    </div>
    <Modal
        v-model="flowModal"
        title="流量过滤"
        width="700"
        footer-hide>
        <Transfer
		        :data="flowPortSrcListTransfer"
		        :target-keys="srcDevices"
		        :titles="['可选机器','源']"
		        filterable
		        :filter-method="srcFilterMethod"
		        :list-style="listStyle"
		        @on-change="srcHandleChange" style="margin-bottom:10px;"></Transfer>
	        <Transfer
		        :data="flowPortSrcListTransfer"
		        :target-keys="dstDevices"
		        :titles="['可选机器','目的']"
		        filterable
		        :filter-method="dstFilterMethod"
		        :list-style="listStyle"
		        @on-change="dstHandleChange"  style="margin-bottom:10px;"></Transfer>
		    <!--<Button type="primary" long @click="getSelDstFlowPorts" style="width:700px">下发</Button>-->
    </Modal>
  </div>
</template>

<script>
  import {queryflowfilter,setPorts,delflowfilter} from '@/api/drill'
  import {queryVmWithParty} from '@/api/drill_compete'
  import {getTargetTeamList} from '@/api/drill_compete'
  export default {
  name: 'flow',
  	props:['isDistributed'],
	data(){
	  	return {
		  	routeParams:{
	          id:this.$route.query.id,
	          prjid:this.$route.query.prjid
	        },
	        projectId:this.$route.query.prjid,
	        testId:this.$route.query.id,
	        flowList:[],
	        flowListPage:[],//前端分页数据
	        flowTotal:0,
	        flowPortSrcList:[],//工程下所有端口ids
	        queryflow:{
	        	pageIndex:1,
	        	pageSize:10
	        },
	        listStyle:{
	        	width:'40%'
	        },
	        flowPortSrcListTransfer:[],
	        dstDevices:[], //流量下发目标
	        srcDevices:[], //流量下发源
	        flowModal:false,
	        flowCol: [
	            {
	                type: 'index',
	                align: 'center'
	            },
	            {
		            title: '名称',
		            key: 'name',
		            align: 'center'
	            },
	            {
		            title: 'IP',
		            key: 'ip',
		            align: 'center'
	            },
	            {
		            title: '子网',
		            key: 'vlan',
		            align: 'center'
	            },
	            {
		            title: 'mac地址',
		            key: 'mac',
		            align: 'center'
	            },
	            {
		            title: '类型',
		            key: 'type',
		            align: 'center'
	            },
//	            {
//		            title:'操作',
//		            key:'os',
//		            ellipsis:true,
//		            width:200,
//		            render:(h,params)=>{
//		              return h('div',[
//		                h('Poptip', {
//		                  props: {
//		                    confirm: true,
//		                    'ok-text': "确定",
//		                    'cancel-text': "取消",
//		                    type: 'error',
//		                    size: 'large',
//		                    title: '你确定要删除吗?'
//		                  },
//		                  on: {
//		                    'on-ok': () => {
//		                      this.delflowfilter(params.row)
//		                    }
//		                  }
//		                }, [
//		                  h('Button', {
//		                    props: {
//		                      type: 'error',
//		                      size: 'small'
//		                    },
//		                    style: {
//		                      marginRight: '5px'
//		                    },
//		                  }, '删除')
//		                ])
//		              ])
//		            }
//
//	            }
	        ],
	        targetTeamData:[]
	  	}
	},
	filters:{

	},
	mounted(){
    	let p1 = this.getAllPortlist();
    	//查询所有靶机
		let p2 = this.getTargetTeamList();
		Promise.all([p1,p2]).then(data => {
			let initPort = [];
			this.targetTeamData.forEach(target => {
				let dst = this.flowPortSrcList.filter(port => port.ip == target.ip)[0];
				if(dst){
					initPort.push(dst.id);
				}
			})
			this.getSelDstFlowPorts(initPort,'dst')
		})
	},
    methods:{
    	getTargetTeamList(){
    		return new Promise((resolve,reject) => {
				let params = {
					pageIndex:1,
					pageSize:2147483647,
					sceneId:this.$route.query.id,
					projectId:this.$route.query.prjid
				}
		  		getTargetTeamList(params).then(data => {
		  			if(data.code==1){
		  				this.targetTeamData = data.data.items || data.data;
		  				resolve();
		  			}else{

		  			}
		  		})
	  		})
	  	},
      //查询流量数据列表
      queryFlowList() {
        let params = {projectId:this.routeParams.prjid};
        queryflowfilter(params).then(data => {
          if (data.code == 1) {
          	this.flowList = data.data.dstDevices;
            let dstData = data.data.dstDevices;
            dstData.forEach(item => {
              let ipAndVlan = this.flowPortSrcList.filter(ips => ips.id === item.id)[0]; //获取IP和vlan
              if (ipAndVlan) {
                let {
                  ip,
                  vlan
                } = ipAndVlan;
                this.flowList.push({
                  ip,
                  vlan,
                  ...item
                })
              }
            })
            this.flowListPage = this.flowList.slice((this.queryflow.pageIndex - 1) * this.queryflow.pageSize,
              this.queryflow.pageSize)
            this.srcDevicesData =  data.data.srcDevices;
            this.dstDevicesData = data.data.dstDevices;
            this.srcDevices = data.data.srcDevices.map(device => device.id);
            this.dstDevices = data.data.dstDevices.map(device => device.id)
//          if (this.flowList.length === 0) {
//            this.getSelDstFlowPorts();
//          }
            console.log(this.dstData)
          }else{
          	this.$Message.error(data.message);
          }
        }).catch(error => {
        	this.$Message.error('查询流量过滤失败，请检查网络设置');
        })
      },
      getFlowSize(size){
      	this.queryflow.pageIndex = size;
      	this.flowListPage = this.dstData.slice((this.queryflow.pageIndex - 1) * this.queryflow.pageSize, this.queryflow
          .pageIndex * this.queryflow.pageSize)
      },
      getFlowPage(page){
      	this.queryflow.pageIndex = page;
      	this.flowListPage = this.dstData.slice((this.queryflow.pageIndex - 1) * this.queryflow.pageSize, this.queryflow
          .pageIndex * this.queryflow.pageSize)
      },
      //下发流量配置
      getSelDstFlowPorts(moveKeys,type) {
        //保存下发流量
        let params = {
        	dstDevices:[],
        	projectId:this.projectId,
        	srcDevices:[]
        };
        if(type == "src"){
        	params.srcDevices =moveKeys.map(deviceId => {
	        	let dst = this.flowPortSrcList.filter(device => device.id == deviceId)[0];
	        	return {
	        		id:dst.id,
	                name:dst.name,
	                mac:dst.mac,
	                type:'-'
	        	}
	        });
        }else{
        	params.dstDevices = moveKeys.map(deviceId => {
	        	let dst = this.flowPortSrcList.filter(device => device.id == deviceId)[0];
	        	return {
	        		id:dst.id,
	                name:dst.name,
	                mac:dst.mac,
	                type:'-'
	        	}
	        });
        }
        setPorts(params).then(data => {
          if (data.code == 1) {
            console.info('流量下发成功');
          }else{
          	this.$Message.error(data.message);
          }
          this.queryFlowList();
        }).catch(error => {
        	this.$Message.error('新增流量过滤失败，请检查网络设置');
        	this.queryFlowList();
        })
      },
      //获取工程下所有端口ids
      getAllPortlist() {
      	return new Promise((resolve,reject) => {
      		let params = {}
	        params.pageIndex = 1;
	        params.pageSize = 2147483647;
	        params.projectId = this.projectId;
	        params.findPorts = true;
	        let flowPortSrcList = []
			let flowPortSrcListTransfer = []
	        queryVmWithParty(this.projectId,params).then(data => {
	          if (data.code == 1) {
				  let data1=data.data.list
				if(this.isDistributed==1){
						data1 =data1.filter(item=>{
						return  item.access.length>0
					})
				}
				console.log(data1,'data1data1');
				  data1.forEach(item => {
					  item.address.forEach(child => {
						  flowPortSrcList.push({
							  id: child.id,
							  mac:child.macAddress,
							  name:item.name,
							  ip:child.ips[0].ipAddress
						  })
						  flowPortSrcListTransfer.push({
							  label:item.name + ' ( ' + item.networkName + '-' + child.ips[0].ipAddress + ' ) ',
							  key:child.id
						  })
					  })
				  })
				  this.flowPortSrcList = flowPortSrcList
				  this.flowPortSrcListTransfer = flowPortSrcListTransfer
	            console.log(this.flowPortSrcList)
	            //if(this.deployStatus == 3){
	               this.queryFlowList();
	               resolve();
	            //}
	          }
	        })
      	})
      },
        delflowfilter(moveKeys,type){
        	let params = {};
        	if(type == 'dst'){
        		params.dstDevices = moveKeys.map(deviceId => {
		        	let dst = this.dstDevicesData.filter(device => device.id == deviceId)[0];
		        	return {
		        		id:dst.id,
                name:dst.name,
                mac:dst.mac,
                type:'-'
		        	}
		        });
        	}else{
        		params.srcDevices = moveKeys.map(deviceId => {
		        	let dst = this.srcDevicesData.filter(device => device.id == deviceId)[0];
		        	return {
		        		id:dst.id,
		                name:dst.name,
		                mac:dst.mac,
		                type:'-'
		        	}
		        });
        	}
	        params.projectId = this.projectId;
        	delflowfilter(params).then(data => {
        		if(data.code == 1){
        			//this.$Message.info(data.message);
        			this.queryFlowList();
        		}else{
        			this.$Message.error(data.message);
        		}
        	}).catch(error => {
        		this.$Message.error('删除流量过滤失败，请检查网络设置');
        	})
        },
    	srcFilterMethod(data, query) {
            return data.label.indexOf(query.trim()) > -1;
        },
        dstFilterMethod(data, query) {
            return data.label.indexOf(query.trim()) > -1;
        },
        dstHandleChange(newTargetKeys,direction,moveKeys) {
        	if(direction == 'right'){
        		this.dstDevices = newTargetKeys;
        		this.getSelDstFlowPorts(moveKeys,'dst');
        	}else{
        		this.delflowfilter(moveKeys,'dst');
        	}
        },
        srcHandleChange(newTargetKeys,direction,moveKeys) {
        	if(direction == 'right'){
        		this.srcDevices = moveKeys;
        		this.getSelDstFlowPorts(moveKeys,'src');
        	}else{
        		this.delflowfilter(moveKeys,'src');
        	}
        },
        openModal(){
        	this.flowModal = true;
        }
  }
}
</script>

<style>
  .drillsTable .ivu-poptip-body {
    text-align: left!important;
  }
  .scenesHeader{
    margin-bottom: 16px;
  }
  .drillTables{
    min-height: 300px;
  }
  .drillsTable.ivu-table-wrapper{
    overflow: inherit;
  }
</style>
<style scoped>
  .Titles{
    background: #eeeeee;
    margin: 16px auto;
    padding: 10px 0;
  }
  .targetHeader{
    /*padding: 10px;*/
    margin-bottom: 10px;
  }
  .borders{
    padding: 16px;
  }
</style>
